<template>
  <!-- 信息录入 -->
  <div class="box">
    <el-form
      label-width="100px"
      size="small"
      :inline="true"
      ref="inforForm"
      :model="form"
      :rules="rules"
    >
      <section class="addInfor">
        <div>
          <el-form-item label="购房人姓名" prop="basicBorrowerName">
            <el-input v-model="form.basicBorrowerName"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="basicBorrowerCard">
            <el-input v-model="form.basicBorrowerCard"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="basicBorrowerPhone">
            <el-input v-model="form.basicBorrowerPhone"></el-input>
          </el-form-item>
          <el-form-item label="现住地址" prop="basicBorrowerAddress">
            <el-input v-model="form.basicBorrowerAddress"></el-input>
          </el-form-item>
          <el-form-item label="受理时间" prop="acceptTime">
            <el-date-picker
              v-model="form.acceptTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </section>
    </el-form>
  </div>
</template>

<script>
import { saveOrder } from "../../../src/assets/js/api";
import { GMTToStr } from "../../assets/js/utlis";
export default {
  name: "Information",
  data() {
    return {
      form: {
        basicBorrowerName: "",
        basicBorrowerCard: "",
        basicBorrowerPhone: "",
        basicBorrowerAddress: "",
        acceptTime: ""
      },
      rules: {
        basicBorrowerName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        basicBorrowerPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //表单验证
    validataForm(orderNumber) {
      this.$refs["inforForm"].validate(valid => {
        if (valid) {
          this.form.orderNumber = orderNumber;
          let productId = parseInt(sessionStorage.getItem("productId"));
          this.form.productId = productId;
          //转换日期格式
          if (this.form.acceptTime) {
            this.form.acceptTime = GMTToStr(this.form.acceptTime);
          }
          saveOrder(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success(res.message);
              sessionStorage.setItem("orderNumber", orderNumber);
              this.$router.replace({ path: "/Index/FapaiList" });
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查输入的格式");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped type="less">
.box {
  line-height: 40px;
}
.addInfor {
  text-align: left;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 10px 10px 10px 10px;
}
.addInfor ::v-deep.el-form-item__content {
  width: 100%;
  vertical-align: middle;
}
.addInfor ::v-deep.el-date-editor.el-input {
  width: 100%;
}
.addInfor ::v-deep.el-form-item--small.el-form-item {
  margin-bottom: 0;
  margin-right: 0;
  box-sizing: border-box;
  width: 25%;
  position: relative;
  padding-left: 100px;
  margin-bottom: 12px;
}
.addInfor ::v-deep.el-form-item__label {
  position: absolute;
  left: 0;
  top: 4px;
}
.addInfor ::v-deep .el-input-group__prepend {
  padding: 0 10px;
}
.addInfor ::v-deep .el-input-group__append {
  padding: 0 0;
}
.addInfor .te ::v-deep .el-input__inner {
  padding: 0;
  text-align: center;
  line-height: 30px;
}
</style>
